<template>
	<div class="food-category">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>美食管理</el-breadcrumb-item>
				<el-breadcrumb-item>菜品分类管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="food-category-a">
			<!--	搜索框	-->
			<div class="food-category-search">
				<el-form ref="form" :inline="true" :model="searchForm" size="medium">
					<el-form-item label="菜品分类名称">
						<el-input v-model="searchForm.food_kind_name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 一堆按钮 新增 删除 -->
			<div class="food-category-buttons">
				<div>
					<el-button type="primary" size="medium" @click="addFoodCategory"><i class="el-icon-plus"></i> 增加</el-button>
				</div>
				<div>
					<el-button type="danger" size="medium" :disabled="delButton" @click="delSelect"><i class="el-icon-delete"></i> 删除</el-button>
				</div>
			</div>
			<!-- 菜品分类表格 -->
			<div class="food-category-table">
				<el-table
					:data="tableData"
					style="width: 100%"
					@selection-change="searchChange">
					<el-table-column
						type="selection"
						width="55px"
						align="center">
					</el-table-column>
					<el-table-column
						prop="food_kind_id"
						label="菜品分类id"
						sortable>
					</el-table-column>
					<el-table-column
						prop="food_kind_name"
						label="菜品分类名称">
					</el-table-column>
					<el-table-column
						prop="food_kind_depiction"
						label="描述">
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						width="130"
						align="center">
						<template slot-scope="scope">
							<el-button @click="editClick(scope.row)" type="text" ><i class="el-icon-edit"></i> 编辑</el-button>
							<el-button @click="delClick(scope.row)" type="text" ><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="food-category-page">
				<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-sizes="[5,10,15,20]"
					:current-page="pageNum"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="currentChange">
				</el-pagination>
			</div>
			<!-- 增加弹出窗 -->
			<div class="food-category-dialog" >
				<el-dialog
					title="增加菜品分类"
					:visible.sync="addDialogVisible"
					width="600px"
				>
					<div class="food-category-dialog-from"><!-- 中间内容 -->
						<el-form :model="addForm" label-width="120px" size="medium">
							<el-form-item label="菜品分类名称" prop="food_kind_name">
								<el-input v-model="addForm.food_kind_name"></el-input>
							</el-form-item>
							<el-form-item label="菜品分类描述" prop="food_kind_depiction">
								<el-input v-model="addForm.food_kind_depiction"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
			    <el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit(addForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
			<!-- 编辑弹出窗 -->
			<div class="food-category-dialog" >
				<el-dialog
					title="编辑菜品分类"
					:visible.sync="editDialogVisible"
					width="600px"
				>
					<div class="food-category-dialog-from"><!-- 中间内容 -->
						<el-form :model="editForm" label-width="120px" size="medium">
							<el-form-item label="菜品分类名称" prop="food_kind_name">
								<el-input v-model="editForm.food_kind_name"></el-input>
							</el-form-item>
							<el-form-item label="菜品分类描述" prop="food_kind_depiction">
								<el-input v-model="editForm.food_kind_depiction"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editSubmit(editForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import FoodService from "@/views/Food/FoodService";
	import FoodCategoryService from "@/views/FoodCategory/FoodCategoryService";
  export default {
    name: "FoodCategory",
    data(){
      return{
        searchForm:{
          food_kind_name:''
        },
        addForm:{

        },
        editForm:{

        },
        tableData:[],
        total:100,
        pageNum:1,
        pageSize:10,
        addDialogVisible:false,
        editDialogVisible:false,
        delButton:true,
        tableSelect:[],
      }
    },
    methods:{
      //提交搜索表单
      searchSubmit(){
        this.pageNum=1;
        this.searchFoodCategory();
      },
      //批量删除
      delSelect(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let list = this.tableSelect.map(item=>{
            return item.food_kind_id;
          })
					FoodCategoryService.delFoodCategoryAllService({
            delete_list:list
					},r=>{
            this.$message({
              type: 'success',
              message: `删除${r.deletenum}条数据`
            });
            this.searchFoodCategory();
					})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //增加
      addFoodCategory(){
        this.addDialogVisible=true;
      },
      //编辑
      editClick(row){
        this.editDialogVisible=true;
        //console.log(row);
        this.editForm=row;

      },
      //单删
      delClick(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
	        FoodCategoryService.delFoodCategoryService({
            food_kind_id:row.food_kind_id,
	        },r=>{
            if(r.deletenum==1){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
            this.searchFoodCategory();
	        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //页面跳转
      currentChange(val){
        //console.log(val);
        this.pageNum=val;
        this.searchFoodCategory();
      },
      //页面大小改变
      handleSizeChange(val){
        this.pageSize=val;
        this.pageNum=1;
        this.searchFoodCategory();
      },
      //提交添加表单
      addSubmit(addFrom){
        this.addDialogVisible = false;
				FoodCategoryService.addFoodCategoryService(
					addFrom
        ,r=>{
            if(r.insertnum==1){
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '提交失败!'
              });
            }
            this.searchFoodCategory();
	      })
      },
      editSubmit(editForm){
        this.editDialogVisible = false;
				FoodCategoryService.editFoodCategoryService(
          editForm
				,r=>{
            if(r.updatenum==1){
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '提交失败!'
              });
            }
            this.searchFoodCategory();
				})
      },
      //表格选择改变回调
      searchChange(select){
        //console.log(select);
        this.tableSelect = select;
        this.delButton = select.length == 0;
      },
      searchFoodCategory(){
        console.log(`搜索ing：分类名：${this.searchForm.food_kind_name}当前页：${this.pageNum}页大小：${this.pageSize}`)
				FoodCategoryService.searchCategoryService({
          food_kind_name:this.searchForm.food_kind_name,
					pageNum:this.pageNum,
          pageSize:this.pageSize,
				},r=>{
					this.tableData=r.foodkindList.list;
					this.total=r.foodkindList.total;
				})
      }

    },
    created(){
      this.searchForm.food_kind_name='';
      this.pageNum=1;
      this.pageSize=10;
      this.searchFoodCategory();
    }
  }
</script>

<style lang="less">

	@import '../../style/Common.less';

	.food-category-a{
		padding: 20px;
	}
	.food-category-search{
		color: #606266;
		font-weight:bold;
	}
	.food-category-buttons{
		display: flex;
		> div{
			margin: 0 12px 20px 12px;
		}
	}
	.food-category-table{

	}
	.food-category-page{
		height: 32px;
		margin: 20px 20px 20px 0;
		float: right;
	}
	.food-category-dialog{
		.food-category-dialog-from{
			padding: 0 20px;
		}
	}

	.hide .el-upload--picture-card {
		display: none;
	}
</style>